<div style="width:100%;height:100%;overflow:hidden;" class="nihilo">
<!--     <label>${nls.serviceUrl}</label>
    <input data-dojo-attach-point="textNode"> -->
    <div id='neo'>
        <!--         <h3 style="float:left;">Min Interval Spacing</h3>
                <div class='grid-overlay-setting-interval-width' data-dojo-attach-point="minIntervalDisplay"></div>
                <p>
                <div style="width: 50px;"><strong><span data-dojo-attach-point="minIntervalSpacingVal">px</span></strong></div>
                <div style="width:100px;" data-dojo-attach-point="minIntervalSpacing" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 50, maximum:250, discreteValues:41, intermediateChanges:true, showButtons:false"></div>
                </p>
        -->
        <table class="settings-section">
            <tbody>
                <tr>
                    <td>Min Interval Spacing<br></td>
                    <td><div style="width: 50px;"><strong><span data-dojo-attach-point="minIntervalSpacingVal">px</span></strong></div></td>
                    <td style='padding-top:2px;'>
                        <div style="width:100px;" data-dojo-attach-point="minIntervalSpacing" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 50, maximum:250, discreteValues:41, intermediateChanges:true, showButtons:false"></div>
                    </td>
                </tr>
                <tr>
                    <td colspan="3"><div class='grid-overlay-setting-interval-width' data-dojo-attach-point="minIntervalDisplay"></div></td>
                </tr>
                <tr>
                    <td><br>Line Opacity<br><br></td>
                    <td><br><div style="width: 50px;"><strong><span data-dojo-attach-point="lineOpacityVal">%</span></strong></div></td>
                    <td><br>
                        <div style="width:100px;" data-dojo-attach-point="lineOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 0.05, maximum:1, discreteValues:20, intermediateChanges:true, showButtons:false"></div>
                    </td>
                </tr>
                <tr>
                    <td>Label Opacity<br><br></td>
                    <td><div style="width: 50px;"><strong><span data-dojo-attach-point="labelOpacityVal">%</span></strong></div></td>
                    <td>
                        <div style="width:100px;" data-dojo-attach-point="labelOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 0.05, maximum:1, discreteValues:20, intermediateChanges:true, showButtons:false"></div>
                    </td>
                </tr>
                <tr>
                    <td>Center Label Opacity<br><br></td>
                    <td><div style="width: 50px;"><strong><span data-dojo-attach-point="centerLabelOpacityVal">%</span></strong></div></td>
                    <td>
                        <div style="width:100px;" data-dojo-attach-point="centerLabelOpacity" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props="value:100, minimum: 0.05, maximum:1, discreteValues:20, intermediateChanges:true, showButtons:false"></div>
                    </td>
                </tr>
                <tr>
                    <td>Grid Zone Label Placement</td>
                    <td>
                        <input data-dojo-attach-point="topLeft" type="checkbox">Upper Left<br>
                        <input data-dojo-attach-point="topRight" type="checkbox">Upper Right<br>
                        <input data-dojo-attach-point="btmLeft" type="checkbox">Lower Left<br>
                        <input data-dojo-attach-point="btmRight" type="checkbox">Lower Right<br>
                        <input data-dojo-attach-point="center" type="checkbox">Center
                    </td>
                </tr>
                <tr>
                    <td>Vertical Line Labels</td>
                    <td>
                        <input data-dojo-attach-point="horizontalLabels" name="verticalLabels" type="radio">Horizontal<br>
                        <input data-dojo-attach-point="verticalLabels" name="verticalLabels" type="radio">Vertical
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="grid-overlay-setting-style">
            <h3>Style</h3>
            <table>
                <thead>
                    <tr>
                        <th>Index</th>
                        <th>Color</th>
                        <th>Font Size</th>
                        <th>Line Width</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>0</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker0" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize0" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize0" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:0,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker1" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize1" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize1" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:0,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker2" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize2" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize2" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:0,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker3" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize3" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize3" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:0,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker4" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize4" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize4" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:0,max:10}, value:2"></div>
                        </td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>
                            <div data-dojo-attach-point="colorPicker5" class="grid-overlay-setting-color-picker" data-dojo-type="jimu/dijit/ColorPicker"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="fontSize5" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:5,max:72}, value:15"></div>
                        </td>
                        <td>
                            <div class="font-size" data-dojo-attach-point="lineSize5" data-dojo-type="dijit/form/NumberSpinner"
                            data-dojo-props="intermediateChanges:true, constraints:{min:0,max:10}, value:2"></div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div data-dojo-attach-point="sampleMap" class="grid-overlay-setting-style-map"></div>
</div>
